<template>
  <div id="login">
    <div class="loginForm" :style="{ height:$store.state.sizes.loginHeight,width:$store.state.sizes.loginWidth,
    'margin-top': $store.state.sizes.loginTop,'margin-left':$store.state.sizes.loginLeft}">
      <el-form ref="login" class="login-form" :model="user" :rules="rules" hide-required-asterisk label-width="30px">
        <div class="login-title">
          图床<sub>v{{ $store.state.version }}</sub>
        </div>
        <br><br>
        <el-form-item prop="userId">
          <el-input v-model="user.userId" placeholder="用户名">
            <el-button slot="prepend" icon="el-icon-user" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" type="password" placeholder="密码">
            <el-button slot="prepend" icon="el-icon-key" />
          </el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="loginSubmit">登录</el-button>
          <el-button style="float: right;" class="login-btn" type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Prop,
    Vue
  } from 'vue-property-decorator'
  import md5 from 'js-md5'
  import {
    login
  } from '@/static/tool/ruleControl.js'

  @Component
  export default class Login extends Vue {
    marginTop = (window.innerHeight - 350) * 0.4 + 'px';
    user = {
      userId: null,
      password: null
    };

    rules = login;

    loginSubmit() {
      const that = this
      this.$refs.login.validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(that.user))
          param.password = md5(param.password)
          that.$post('public/login', param).then(function(response) {
            if (response == true) {
              setTimeout(() => {
                that.$emit("init");
              }, 300)
            }
          })
        } else {
          return false
        }
      })
    }

    reset() {
      this.user = {
        userId: null,
        password: null
      }
    }

    init(b) {
      this.$store.commit('updateState', {
        prop: 'showHeader',
        value: b
      })
      this.$store.commit('initSizes')
    }

    created() {
      this.init(false);
      const that = this;
      document.onkeydown = function(e) {
        let ev = e || event;
        let key = ev.keyCode;
        if (key == 13) {
          that.loginSubmit();
        }
      };
    }
  }
</script>

<style scoped>
  #login {
    align-items: center;
    background: none;
  }

  .loginForm {
    background: none;
    height: 350px;
    width: 500px;
    box-shadow: 0 0 25px #cac6c6 !important;
    padding: 30px 30px 20px 0px;
  }

  .login-title {
    margin: 0px 70px 20px;
    font-size: 1.8rem;
    text-align: center;
    color: #2d3748;
  }

  .login-btn {
    margin: 0px 30px;
    width: 100px;
  }
</style>
